import React, { Component, Fragment } from 'react'
import { Row, Col, Card } from 'antd'
import { DashboardOutlined } from '@ant-design/icons'
import { RingProgress } from '@ant-design/charts'
import { FormattedMessage } from 'react-intl'
import './App.css'

export default class CPUState extends Component {

    getColor = (percent) => {
        let color = (percent < 0.5) ? "#52c41a" :
            ((percent < 0.75) ? "#1890ff" :
                ((percent < 0.9) ? "#faad14" : "#ff4d4f"))
        return color
    }

    render() {
        let { loadavg } = this.props
        const idx = [0, 1, 2]
        const title = ["t1min", "t5min", "t15min"]

        return (
            <Fragment>
                <Row>

                    <Card.Meta className="stateCard"
                        avatar={<DashboardOutlined />}
                        title="CPU"
                    />

                    <Card
                        className="stateCard"
                        title={<FormattedMessage id="CPULoadavg" />}
                    >
                        <Row gutter={10}>
                            {
                                idx.map((item, i) => (

                                    <Col
                                        xs={24} sm={8} md={8} lg={8}
                                        key={"Loadavg" + title[item] + item}
                                    >
                                        <Card
                                            bordered={false}
                                            size="small"
                                            title={<FormattedMessage id={title[item]} />}
                                        >

                                            <RingProgress
                                                percent={parseFloat(loadavg[item])}
                                                color={this.getColor(parseFloat(loadavg[item]))}
                                                renderer="svg"
                                                autoFit={true}
                                            />

                                        </Card>
                                    </Col>
                                ))
                            }
                        </Row>
                    </Card>

                </Row>
            </Fragment>

        )
    }
}
